<template lang="html">
  <div class="login_container">
      <div>
        <img src="../../assets/img/logo.png" alt="" class="logo">
      </div>
      <div class="login" >
<!--        <div class="img">-->
<!--          <img src="../../assets/img/login.png" alt="">-->
<!--        </div>-->
        <div class="login_frame" style="z-index: 999">
            <div class="title">欢迎登录情遇</div>
            <el-form class="el_form">
                <el-form-item>
                    <el-input placeholder="请输入账号" @keyup.enter.native="onPressLogin" v-model="loginForm.username" clearable>
                      <i slot="prefix" class="el-icon-user"></i>
                    </el-input>
                </el-form-item>
                <el-form-item>
                  <el-input placeholder="请输入密码" type="password" @keyup.enter.native="onPressLogin" show-password v-model="loginForm.password">
                    <i slot="prefix" class="el-icon-lock"></i>
                  </el-input>
                </el-form-item>
            </el-form>
            <div class="login_btn">
              <el-button class="login_btn" type="primary" :loading="logging" @click="onPressLogin" size="medium">登　录</el-button>
            </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      loginForm: {},
      logging: false,
    }
  },
  computed:{

  },
  created(){
    this.loginTips();
  },
  methods:{
    loginTips(){
      if(this.$route.query.redirect){
        this.$message.error('登录过期，请重新登录！')
      }
    },
    keyup(e){
      console.log(e)
    },
    indexLogin(){
      if(!this.loginForm.username){
        this.$message.error('请输入用户名！');
        return false;
      }else if(!this.loginForm.password){
        this.$message.error('请输入密码！');
        return false;
      }
      let data = {
        username: this.loginForm.username,
        password: this.loginForm.password
      };
      this.logging = true;
      this.$httpPost('/systemPath/sys/login',data).then(res =>{
          if(res.code == 0){
              this.$message.success('登录成功');
              window.open("/index","_self");
          }else{
              this.$message.error(res.message);
              this.logging = false;
              return;
          }
      });
    },
    onPressLogin(){
      this.indexLogin()
    }
  }
}
</script>

<style lang="css" scoped>
.logo{
  width: 140px;
  height: 100px;
  margin-left: 40px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.login_container{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url('../../assets/img/login.jpg') no-repeat;

  top: 0;
  left: 0;
  width:100%;
  height:100%;
  min-width: 1000px;


  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  /*background-position: center 0;*/
  /*background:linear-gradient(0deg,rgba(7,89,159,1),rgba(92,180,255,1));*/
}
/*.logo{*/
/*  width: 441px;*/
/*  height: 98px;*/
/*  margin-left: 100px;*/
/*  margin-top: 30px;*/
/*  margin-bottom: 30px;*/
/*}*/
.login{
  margin-left: 100px;
  position: relative;
}
.login .img{
  width: 53%;
}
.login .img img{
  width: 100%;
  display: block;
}
.login_frame{
  width: 360px;
  background: #fff;
  border-radius: 4px;
  padding: 60px 0;
  position: absolute;
  right: 16%;
  top: 4%;
}
.login_frame .title{
  font-size: 18px;
  color: #4196FF;
  text-align: center;
  font-weight: 600;
  padding-bottom: 30px
}
.login_frame .el_form,.login_frame .login_btn{
  width: 80%;
  margin: 0 auto;
}
.login_frame .login_btn .login_btn{
  width: 100%;
  box-sizing:  border-box;
}
/deep/.el_form .el-input__inner{
  border-top: none;
  border-right: none;
  border-left: none;
  border-radius: 0;
}
</style>
